<template>
  <el-dialog
    ref="content"
    :visible.sync="showDialog"
    :before-close="check"
    title="文件上传"
    width="40%"
  >
    <el-upload
      ref="upload"
      :before-upload="beforeUpload"
      :multiple="false"
      :http-request="uploadFile"
      :limit="1"
      :show-file-list="false"
      action=""
      drag
      list-type="text"
    >
      <!-- accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" -->
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div class="bthArr">
      <el-button
        type="primary"
        size="mini"
        round
        @click="check"
      >保存</el-button>
      <el-button
        type="primary"
        size="mini"
        round
        plain
        @click="check"
      >取消</el-button>
      <el-button
        type="primary"
        size="mini"
        round
        plain
        @click="downLoad"
      >下载模板</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { download } from '@/utils/download.js'
// import secret from '@/utils/secret'
// import { mapGetters } from 'vuex'
import { upload1 } from '@/api/search.js'
export default {
  name: 'WatchInfo',
  props: {
    // 遮罩
    upChange: {
      type: Boolean,
      default: false
    },
    platformId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDialog: false,
      plat: ''
    }
  },

  watch: {
    upChange(newVal) {
      this.showDialog = newVal
      this.plat = this.platformId
    }
  },
  mounted() {},
  methods: {
    downLoad() {
      download({}, '/querySummary/batchUpdate/template.do', '批量修改用户信息模板')
    },
    // 父子组件回调
    check() {
      this.showDialog = false
      this.$emit('closeChange')
      this.$refs.upload.clearFiles()
    },
    uploadFile(item) {
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      console.log(fileObj)
      /* console.log(fileObj)
      form.append('billingChannelId', this.index) */
      form.append('platformId', this.plat)
      // var data = {
      //   file: form
      // }
      upload1(form).then(res => {
        console.log(res)
        if (res.resultCode === '0000') {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          this.check()
        }
        this.$refs.upload.clearFiles()
      })
      // this.loadStatus = true
      console.log(form)
    },
    beforeUpload(file) {
      console.log('beforeUpload')
      console.log(file.type)
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      return (isText | isTextComputer)
    }
  }
}
</script>
<style scoped>
.upload-demo{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
<style>
.el-dialog {
  margin-top: 10vh !important;
  max-height: calc(100% - 120px);
}
.el-dialog {
  display: flex;
  flex-direction: column;
}
.el-dialog .el-dialog__body {
  overflow: auto;
}
.basicInfo {
  width: 99%;
  margin: 0 auto;
  padding-left: 20px;
}
.bthArr{
  margin: 17px auto -12px auto;
  width: 230px;
}
.el-upload--text{
  display: flex !important;
  justify-content: center !important;
}
</style>
